<template>
    <elm-page-bb>
        <el-transfer style="width:583px;margin:auto;" size="mini" v-model="roles" :data="listData" :props="{key: 'id',label: 'name'}" :titles="['未选角色', '已选角色']"
                     v-loading="loading">
        </el-transfer>
        <template slot="bottom">
            <el-button type="success" size="small" @click="submit">立即保存</el-button>
            <el-button size="small" @click="close">取消</el-button>
        </template>
    </elm-page-bb>
</template>

<script>
    export default {
        extends: elmVueBase,
        data() {
            return {
                listData: [], roles: []
            }},
        created() {
            this.getListData();
        },
        methods: {
            async getListData() {
                this.loading = true;
                var p1 = await this.post('/system/role/GetData', {});
                var p2 = await this.post('/system/role/GetUserRole',{user_id: this.request.id});
                this.listData = p1;
                this.roles = p2.map(item => item.id);
                this.loading = false;
            },
            async submit() {
              var items = [];
              for (var role_id of this.roles) {
                items.push({role_id: role_id, user_id: this.request.id});
              }
              var res = await this.post('/system/role/SaveRoleUser', {"items": items, user_id: this.request.id});
              if (res>0) {
                this.close();
                this.v('保存成功。');
                this.request.callVue.tablebinding();
                var res = await this.post('/system/login/GetUserMenu');
                elm.main.vue.menuData=elm.info.menu = res;
              } else {
                this.error('保存失败，请稍后尝试。');
              }
            },
        }
    }
</script>

<style scoped>
</style>